import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableHighlight
} from 'react-native';
import Swiper from 'react-native-swiper';
// Actions 表示要进行路由的JS操作了，可以跳转到新路由
import { Actions } from 'react-native-router-flux'
var styles = StyleSheet.create({
  box:{
    width:'33.333%',
    alignItems:'center',
    marginTop:15
  }
})
export default class Home extends Component {
  constructor(props){
    super(props)
    this.state = {
      images: [] // 轮播图数组
    }
  }
  componentWillMount(){
    /* fetch('http://vue.studyit.io/api/getlunbo')
      .then(response => response.json())
      .then(data =>{
        console.warn(data)
        this.setState({
          images:data.images
        })
      }) */
      this.setState({
        images:[
          {img:require('../../assets/images/1.jpg')},
          {img:require('../../assets/images/2.jpg')},
          {img:require('../../assets/images/3.jpg')},
          {img:require('../../assets/images/4.jpg')}
        ]
      })
  }
  render(){
    return <View>
      <View style={{height:200}}>
        <Swiper height={200} horizontal={true} autoplay autoplayTimeout={4} showsButtons={true}>
          {this.state.images.map((item,i) =>{
            return <View key={i}>
              <Image source={item.img} style={{width:'100%',height:'100%'}}></Image>
            </View>
          })}
        </Swiper>
      </View>
      <View style={{flexWrap:'wrap',flexDirection:'row'}}>
        <View style={styles.box}>
          <Image source={require('../../assets/images/menu1.png')} style={{width:60,height:60}}></Image> 
          <Text>新闻资讯</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../assets/images/menu2.png')} style={{width:60,height:60}}></Image> 
          <Text>图片分析</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../assets/images/menu3.png')} style={{width:60,height:60}}></Image> 
          <Text>商品购买</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../assets/images/menu4.png')} style={{width:60,height:60}}></Image> 
          <Text>视频专区</Text>
        </View>
        <TouchableHighlight style={styles.box} onPress={this.goMovieList} underlayColor="white">
          <View>
            <Image source={require('../../assets/images/menu5.png')} style={{width:60,height:60}}></Image> 
            <Text>热映电影</Text>
          </View>
        </TouchableHighlight>
        <View style={styles.box}>
          <Image source={require('../../assets/images/menu6.png')} style={{width:60,height:60}}></Image> 
          <Text>联系我们</Text>
        </View>
      </View>
    </View>
  }
  goMovieList = () => {
    Actions.movielist()
  }
}